<button class="btnCloud">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="icon"><path d="M22,15.04C22,17.23 20.24,19 18.07,19H5.93C3.76,19 2,17.23 2,15.04C2,13.07 3.43,11.44 5.31,11.14C5.28,11 5.27,10.86 5.27,10.71C5.27,9.33 6.38,8.2 7.76,8.2C8.37,8.2 8.94,8.43 9.37,8.8C10.14,7.05 11.13,5.44 13.91,5.44C17.28,5.44 18.87,8.06 18.87,10.83C18.87,10.94 18.87,11.06 18.86,11.17C20.65,11.54 22,13.13 22,15.04Z"></path></svg>
</button>

<style>
/* From Uiverse.io by Peary74 - Tags: button, cloud, save */
.btnCloud {
  background-color: transparent;
  position: relative;
  fill: rgb(155, 153, 153);
  border: none;
}

.btnCloud::after {
  content: 'SAVE';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  transition: 200ms linear;
  transition-delay: 200ms;
  color: black;
  font-size: 13px;
  visibility: hidden;
}

.icon {
  transform: scale(1.4);
  transition: 200ms linear;
}

.btnCloud:hover > .icon {
  transform: scale(1.7);
}

.btnCloud:hover > .icon path {
  fill: #fff;
  cursor: pointer;
}

.btnCloud:hover::after {
  visibility: visible;
  opacity: 1;
  top: -100%;
}

</style>
